<template lang="pug">
el-dialog(
    title="查看故事"
    width="80%"
    class="story"
    :visible="visibleDialog"
    @close="handleCancel"
  )
   .story-img(v-for="(item, index) in storyArr" :key="index" v-show="index === indexActive")
     AImage(:url="item.url" :preview="false" )
   .tr
        el-pagination(
            hide-on-single-page
            prev-text="上一页"
            next-text="下一页"
            :pageSizes="[5, 10, 20, 30, 40, 50, 100]"
            layout='slot, prev, pager, next, jumper'
            :page-size="pagination.pageSize"
            :total="pagination.total"
            :current-page="pagination.pageNum"
            @current-change="val => checkS(val)"
        )
</template>
<script>
import AImage from '@/components/Basic/Image'
import IPagination from '@/components/Basic/Pagination'
export default {
  components: {
    IPagination,
    AImage
  },
  props: {
    storyArr: {
      type: Array,
      default: () => []
    },
    visible: {
      type: Boolean,
      default: false
    },
    title: {
      type: String,
      default: '选择学生'
    },
    btnName: {
      type: String,
      default: '保存'
    }
  },
  data () {
    return {
      checkList: [],
      pagination: {
        pageNum: 1,
        pageSize: 1,
        total: this.storyArr.length
      },
      indexActive: 0
    }
  },
  computed: {
    visibleDialog: {
      get () {
        return this.visible
      },
      set (val) {
        this.$emit('update:visible', val)
      }
    }
  },
  watch: {
    visibleDialog (val) {
      if (val) {
        this.pagination.pageNum = 0
        this.indexActive = 0
      }
    }
  },

  methods: {
    handleCancel () {
      this.visibleDialog = false
    },
    checkS (pages) {
      this.indexActive = pages - 1
      console.log(this.indexActive)
    }
  }
}
</script>
<style lang="scss" scoped>
.story-img {
    min-height: 478px;
    margin-bottom: 10px;
}
.story {
    ::v-deep .el-dialog__body {
            padding: 0 0 10px 0;
        }
}
</style>
